<script setup>

import { onMounted } from 'vue';// 导入Vue的生命周期钩子，用于组件挂载后执行操作
import echarts from '@/echarts'
import dateUtil from '@/utils/dateUtil';
import chartsApi from '@/api/chartsApi'

// 声明一个变量存储ECharts实例，初始化为null
let charts = null;

// 当组件挂载到DOM后执行初始化和数据获取
onMounted(()=>{
    // 初始化ECharts图表
    initEcharts();
    // 获取图表数据
    getData();
});

// 初始化ECharts图表
function initEcharts(){
    // 将ECharts实例绑定到id为"weekMember"的DOM元素上
    charts = echarts.init(document.getElementById('weekMember'));
    // 设置图表的初始配置项 
    charts.setOption(option);
}

// 获取图表数据
function getData(){
    // 获取本周一的日期
    const date = dateUtil.getMonday();
    // 获取本周所有日期（如["2025-09-01", "2025-09-02"...]）
    const days = dateUtil.getWeekDays();
    // 调用API获取本周会员数据，参数为周一的日期
    chartsApi.weekMember(date).then(result => {
        // 初始化一个长度为7的数组，用于存储一周7天的数据，初始值为0
        const data = new Array(7).fill(0);
        // 双重循环：将后端返回的数据匹配到对应日期的位置
        for (let i=0; i<days.length; i++){
            for (let item of result.data){
                // 如果后端返回的日期与本周日期数组中的日期匹配
                if (item.day == days[i]) {
                    // 将对应的数据放入数组
                    data[i] = item.count;
                }
            }
        }
        // 更新图表配置项中的数据
        option.series[0].data = data;
        // 重新设置图表配置，刷新图表
        charts.setOption(option);
    });
}
// 绘制图表
let option = {
    title: {  // 图表标题配置
        text: '本周会员',  // 标题文本
        textStyle: {  // 标题样式
            color: '#161D23',  // 文字颜色
            fontWeight: 'bold',  // 文字粗细
            fontSize: '16px',  // 文字大小
        },
        left: '10px',  // 标题左对齐位置
        top: '10px',   // 标题上对齐位置
    },
    grid: {  // 图表网格配置（控制图表位置和大小）
        left: '3%',    // 左间距
        right: '30px', // 右间距
        bottom: '3%',  // 下间距
        top: '40px',   // 上间距
        containLabel: true  // 网格是否包含坐标轴的刻度标签
    },
    tooltip: {},  // 提示框配置（鼠标悬停时显示的信息），这里使用默认配置
    yAxis: {  // Y轴配置
        type: 'value',  // 数值轴（用于显示数量）
    },
    xAxis: {  // X轴配置
        axisLine: {show: false},  // 不显示坐标轴线
        axisTick: {show: false},  // 不显示坐标轴刻度
        axisLabel: {color: '#161D23'},  // 坐标轴标签颜色
        type: 'category',  // 类目轴（用于显示日期）
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],  // X轴显示的文本
    },
    series: [  // 图表数据系列配置
        {
            name: '用户数量',  // 系列名称（用于提示框）
            type: 'line',     // 图表类型为折线图
            data: [],         // 数据（将由getData函数填充）
            itemStyle: {      // 数据点样式
                color: '#49BCF7',  // 数据点颜色
            },
            label: {           // 数据标签配置
                show: true,     // 显示数据标签
                color: '#50CEFF', // 标签颜色
                position: 'top', // 标签位置（数据点上方）
            },
            backgroundStyle: {  // 背景样式
                color: 'rgba(180, 180, 180, 0.2)'  // 背景色（半透明灰色）
            }
        }
    ]
}
</script>

<template>

<div id="weekMember" style="width: 100%; height: 100%">
</div>

</template>

<style>

</style>